<template>
  <div class="container">
    <div v-if="isShow" class="main">
      <ActionBar
        @search-click="handleSearchClick"
        @insert-click="handleInsertClick"
        @delete-click="handleDeleteClick"
      />
      <Table
        :tableData="formList"
        :loading="tableLoading"
        @selection-change="selectionChange"
        @form-design-click="handleFormDesignClick"
      />
      <el-pagination
        class="pagination"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize"
        :current-page="pageNum"
        :total="total"
        @size-change="handlePageSizeChange"
        @current-change="handlePageNumChange"
      ></el-pagination>
      <!--       <Diglog
        :title="title"
        :data="form"
        :show.sync="dialogVisible"
        @success="getFormList"
      /> -->
      <FormDesignDiglog
        :data="form"
        @formDesign="formDesign"
        :show.sync="formDesignVisible"
        @success="getFormList"
      />
    </div>
    <router-view v-else />
  </div>
</template>

<script>
import ActionBar from './components/ActionBar'
import Table from './components/Table'
// import Diglog from './components/Diglog'
import FormDesignDiglog from './components/FormDesignDiglog'
// import { loadingType } from '../../../common/js/constant'
import { isUrlFinallyParameter } from '../../../utils'
import axios from 'axios'

export default {
  components: {
    ActionBar,
    Table,
    /*     Diglog, */
    FormDesignDiglog
  },
  data() {
    return {
      title: '',
      formName: '',
      /*    dialogVisible: false, */
      formDesignVisible: false,
      form: {},
      formList: []
    }
  },
  computed: {
    isShow() {
      return isUrlFinallyParameter('dynamic_forms')
    }
  },
  mounted() {
    this.getFormList()
  },
  methods: {
    getFormList() {
      /*  const { formName, pageNum, pageSize } = this
      const result = FormDesignService.getFormListByFormName(
        formName,
        pageNum,
        pageSize
      ).then(res => {
        const { list, total, pageNum } = res.data
        this.pageNum = pageNum
        this.total = total
        this.formList = list
      })
      this.loadingAspect(result, loadingType.TABLE) */
      // this.formList = JSON.parse(localStorage.getItem('formList')) || []
      axios({
        method: 'get',
        url: '/form-process/form/v1/list'
      }).then(res => {
        console.log(res)
        let data = res.data.datas
        data = data.map(el => {
          console.log(this.isJsonString(el.fromSeting))
          return {
            ...el,
            formName: el.name,
            createTime: el.creationDate,
            fromSeting: this.isJsonString(el.fromSeting)
              ? JSON.parse(el.fromSeting)
              : []
          }
        })
        this.formList = data
      })
    },
    isJsonString(str) {
      try {
        if (typeof JSON.parse(str) === 'object') {
          return JSON.parse(str)
        }
      } catch (e) {}
      return false
    },
    // 处理搜索点击事件
    handleSearchClick(form) {
      this.formName = form.formName
      this.getFormList()
    },
    // 处理添加按钮点击事件
    handleInsertClick() {
      /*       this.title = '添加表单'
      this.form = null
      this.dialogVisible = true */
      this.form = {}
      this.formDesignVisible = true
    },
    // 处理删除按钮点击事件
    handleDeleteClick() {
      if (this.selection.length < 1) {
        this.$confirm('请至少选择一条记录', '提示', {
          showCancelButton: false,
          confirmButtonText: '确定',
          type: 'warning'
        })
      } else {
        this.$confirm('您确定删除该用户？', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          this.selection.forEach(item => {
            axios({
              method: 'DELETE',
              url: '/form-process/form/v1/delete/' + item.id
            }).then(res => {
              this.$message.success('删除成功')
              this.getFormList()
            })
          })
        })
      }
    },
    // 表单设计保存
    formDesign(data) {
      /*      if (this.formList.length === 0) {
        this.formList.push(data)
      } else {
        let index = this.formList.findIndex(el => el.id === data.id)
        console.log(index)
        if (index === -1) {
          this.formList.push(data)
        } else {
          this.$set(this.formList, index, data)
        }
      } */
      console.log(data)
      console.log(this.formList)

      let param = {
        code: data.code,
        creationDate: data.createTime,
        name: data.formName,
        description: data.description,
        fromSeting: JSON.stringify(data.fromSeting),
        formItems: [{}]
      }
      data.fromSeting.forEach((res, index) => {
        param.formItems[index] = {}
        param.formItems[index].category = res.type // 类型
        if (res.type === 'select') {
          param.formItems[index].category = res.props.multiple
            ? 'checkbox'
            : 'radio'
        }
        param.formItems[index].title = res.title // zn
        param.formItems[index].field = res.field // en
        param.formItems[index].required = res.required
        param.formItems[index].isSearch = res.isSearch // 类型
        param.formItems[index].length = res.props.maxlength
        param.formItems[index].regex = res.pattern
      })
      if (!data.id) {
        axios({
          method: 'put',
          url: '/form-process/form/v1/insert',
          data: param
        }).then(res => {
          this.$message.success('新增成功')
          this.getFormList()
          console.log(res)
        })
      } else {
        param.id = data.id
        axios({
          method: 'post',
          url: '/form-process/form/v1/update',
          data: param
        }).then(res => {
          this.$message.success('编辑成功')
          this.getFormList()
          console.log(res)
        })
      }

      // localStorage.setItem('formList', JSON.stringify(this.formList))
    },
    // 处理表单设计点击
    handleFormDesignClick(value) {
      if (value && value.id) {
        this.form = JSON.parse(JSON.stringify(value))
      }
      this.formDesignVisible = true
    },
    // 处理pageSize改变事件
    handlePageSizeChange(value) {
      this.pageSize = value
      this.getFormList()
    },
    // 处理pageNum改变事件
    handlePageNumChange(value) {
      this.pageNum = value
      this.getFormList()
    }
  }
}
</script>

<style lang="stylus" scoped>
.container
  width 100%
  height 100%
  .main
    padding 20px
    box-sizing border-box
    .pagination
      margin-top 20px
      text-align right
</style>
